import 'dart:math';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:wallpaper/components/placeholder/avatar.dart';
import 'package:wallpaper/components/specialEffects/particle_background.dart';
import 'package:wallpaper/providers/setting_provider.dart';

class WelcomePage extends StatefulWidget {
  const WelcomePage({super.key});

  @override
  State<WelcomePage> createState() => _WelcomePageState();
}

class _WelcomePageState extends State<WelcomePage> {
  int activeIndex = 0;
  late PageController _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: 0);
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    double screenHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Stack(
        children: [
          // 背景渐变
          ParticleBackground(
            particleCount: 45,
            maxParticleSize: 6.0,
            animationDuration: Duration(seconds: 40),
            gradientColors: [
              Color.fromARGB(255, 37, 158, 245),
              Color.fromARGB(234, 0, 68, 136),
            ],
          ),

          // 页面内容
          PageView(
            controller: _pageController,
            onPageChanged: (value) {
              setState(() {
                activeIndex = value;
              });
            },
            children: [
              firstPage(screenHeight),
              secondPage(screenHeight),
              thirdPage(screenHeight)
            ],
          ),

          // 指示器
          Positioned(
            bottom: max(screenHeight * 0.05, 20),
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(3, (index) {
                return AnimatedContainer(
                  width: activeIndex == index ? 24 : 12,
                  height: 6,
                  margin: const EdgeInsets.symmetric(horizontal: 4),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(3),
                    color: activeIndex == index
                        ? Colors.white.withOpacity(0.9)
                        : Colors.white.withOpacity(0.4),
                  ),
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeOut,
                );
              }),
            ),
          ),
        ],
      ),
    );
  }

  Widget firstPage(double screenHeight) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 30),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 浮动动画头像
          AnimatedContainer(
            duration: const Duration(milliseconds: 700),
            curve: Curves.easeOutCubic,
            transform:
                Matrix4.translationValues(0, activeIndex == 0 ? 0 : -50, 0)
                  ..scale(activeIndex == 0 ? 1.0 : 0.8),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(50),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    blurRadius: 20,
                    spreadRadius: 2,
                    offset: const Offset(0, 10),
                  ),
                ],
              ),
              child: const Avatar(size: 110),
            ),
          ),

          const SizedBox(height: 20),
          AnimatedContainer(
            duration: const Duration(milliseconds: 400),
            curve: Curves.easeOutCubic,
            transform:
                Matrix4.translationValues(0, activeIndex == 0 ? 0 : 50, 0)
                  ..scale(activeIndex == 0 ? 1.0 : 0.8),
            child: title('波奇壁纸', 32, isBold: true),
          ),
          AnimatedContainer(
            duration: const Duration(milliseconds: 800),
            curve: Curves.easeOutCubic,
            transform:
                Matrix4.translationValues(0, activeIndex == 0 ? 0 : 50, 0)
                  ..scale(activeIndex == 0 ? 1.0 : 0.8),
            child: title('开源免费的壁纸应用', 18),
          ),
          const SizedBox(height: 40),
        ],
      ),
    );
  }

  Widget secondPage(double screenHeight) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 30),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 标题
          AnimatedContainer(
            duration: const Duration(milliseconds: 600),
            curve: Curves.easeOut,
            transform: Matrix4.translationValues(
                0, activeIndex == 1 ? 0 : -screenHeight * 0.1, 0),
            child: title('丰富功能', 28, isBold: true),
          ),
          AnimatedContainer(
            duration: const Duration(milliseconds: 400),
            curve: Curves.easeOut,
            transform: Matrix4.translationValues(
                0, activeIndex == 1 ? 0 : -screenHeight * 0.1, 0),
            child: title('探索更多壁纸功能', 18),
          ),
          const SizedBox(height: 40),
          // 功能列表
          ..._buildFeatureList(screenHeight),
        ],
      ),
    );
  }

  List<Widget> _buildFeatureList(double screenHeight) {
    final features = [
      FeatureItem(
        icon: Icons.image,
        title: '聚合 N+ 壁纸源',
        description: '提供海量高清壁纸资源',
      ),
      FeatureItem(
        icon: Icons.format_color_fill,
        title: '多种壁纸类型',
        description: '支持 jpg、png、gif 等多种格式',
      ),
      FeatureItem(
        icon: Icons.movie,
        title: '动态壁纸',
        description: '让你的桌面动起来',
      ),
      FeatureItem(
        icon: Icons.photo_library,
        title: '自定义壁纸',
        description: '使用本地图片和视频作为壁纸',
      ),
    ];

    return features.asMap().entries.map((entry) {
      final feature = entry.value;
      return AnimatedContainer(
        duration: Duration(milliseconds: 300 * (entry.key)),
        curve: Curves.easeOut,
        transform: Matrix4.translationValues(
            0, activeIndex == 1 ? 0 : screenHeight * 0.1, 0),
        margin: const EdgeInsets.only(bottom: 20),
        child: feature,
      );
    }).toList();
  }

  Widget thirdPage(double screenHeight) {
    return Consumer<SettingProvider>(builder: (context, provider, child) {
      return Container(
        padding: const EdgeInsets.symmetric(horizontal: 30),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          spacing: 10,
          children: [
            AnimatedContainer(
              duration: const Duration(milliseconds: 600),
              curve: Curves.easeOut,
              transform: Matrix4.translationValues(
                  0, activeIndex == 2 ? 0 : -screenHeight * 0.1, 0),
              child: Row(
                children: [
                  title('准备好开始了吗？', 28, isBold: true),
                ],
              ),
            ),
            AnimatedContainer(
              duration: const Duration(milliseconds: 400),
              curve: Curves.easeOut,
              transform: Matrix4.translationValues(
                  0, activeIndex == 2 ? 0 : -screenHeight * 0.1, 0),
              child: Row(
                children: [
                  title('发现最美的壁纸，装扮你的设备', 18),
                ],
              ),
            ),
            SizedBox(height: 100),
            AnimatedContainer(
              duration: const Duration(milliseconds: 600),
              curve: Curves.easeOut,
              transform: Matrix4.translationValues(
                  0, activeIndex == 2 ? 0 : screenHeight * 0.1, 0),
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.black,
                  foregroundColor: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(5),
                  ),
                  elevation: 8,
                  minimumSize: const Size(double.infinity, 50),
                  padding: const EdgeInsets.symmetric(vertical: 16),
                  textStyle: const TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                onPressed: () {
                  provider.toggleWelcomePage(true);
                },
                child: Text('开始使用'),
              ),
            ),
          ],
        ),
      );
    });
  }

  Widget title(String text, double size, {bool isBold = false}) {
    return Text(
      text,
      textAlign: TextAlign.center,
      style: TextStyle(
        color: Colors.white,
        fontSize: size,
        fontWeight: isBold ? FontWeight.bold : FontWeight.normal,
        letterSpacing: 1.2,
      ),
    );
  }
}

// 功能项组件
class FeatureItem extends StatelessWidget {
  final IconData icon;
  final String title;
  final String description;

  const FeatureItem({
    super.key,
    required this.icon,
    required this.title,
    required this.description,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.1),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
              color: Colors.white.withOpacity(0.2),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Icon(
              icon,
              color: Colors.white,
              size: 28,
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  description,
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.8),
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
